<template>
  <div class="Nav">
    <div class="navBody">
      <img class="navICon" src="@/assets/icon/下载.svg" alt srcset />
      <div class="Login">
        <router-link to="/login" v-if="!name">
          <span class="link">Login</span>
        </router-link>
        <span @click="logoutClick">Logout</span>
      </div>
    </div>
  </div>
</template>

<script>
import logout from '../../../models/logout'
export default {
  data() {
    return {
      name:this.$cookie.get('userID')
    }
  },
  methods: {
    async logoutClick(){
      if(this.$cookie.get('userID')){
        await logout()
        this.name = ''
      }
    }
  },
};
</script>

<style scoped>
.Nav {
  background-color: #fff;
  width: 100%;
  height: 80px;
}
.navBody {
  width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
}
.navICon {
  width: 80px;
}
.Login {
  margin-left: auto;
}
.Login > span {
  padding: 5px;
}
.link{
  text-decoration-line: none !important;
  color: black;
}
</style>